<template lang="pug">
  .withdraw-base
    .base-info
      .balance
        | 现金余额:&nbsp;&nbsp;
        font.money {{user_info.balance}}
        | &nbsp;元
      router-link.records(tag="div", :to="{name: 'WithdrawRecords'}")
        img(src="./assets/icons/records.svg")
        span 提现记录
    form.withdraw-form(@submit.prevent="submitWithdraw", v-if="!success_msg")
      .input-group
        .label 支付宝账号: &nbsp;&nbsp;
        input(placeholder="请输入支付宝账号", v-model="alipay_account")
      .input-group
        .label 可提现金额: &nbsp;&nbsp;
        .txt {{user_info.balance}}
      .error(v-if='err_msg') {{err_msg}}
      .submit-base
        button(type="submit", :disabled="disabled()") 确认提取
    .success-msg(v-if="success_msg") {{success_msg}}
    .qrcode
      img(:src="site_info.qr_code")
    .tips
      | 提交后,长按二维码添加客服微信,处理提现申请
      br
      | 确认提交后,预计1-3个工作日内到账
</template>

<script>
import Divider from './components/Divider'
import UserInfo from './helpers/user_info'
import SiteInfo from './helpers/site_info'

export default {
  name: 'Withdraw',
  components: {
    Divider
  },
  data () {
    return {
      alipay_account: '',
      err_msg: '',
      success_msg: ''
    }
  },
  methods: {
    submitWithdraw () {
      this.$http.post('/proxy/api/withdraws', {number: this.user_info.balance, alipay_account: this.alipay_account, access_token: this.user_info.access_token}).then((res) => {
        if (res.data.error) {
          this.err_msg = res.data.message
        } else {
          this.success_msg = '申请成功！等待打款，进度查询。联系下方↓微信客服↓'
          this.getUserInfo()
        }
      }, (err) => {
        console.log(err)
      })
    },
    disabled () {
      if (this.err_msg) {
        return true
      } else {
        return false
      }
    },
    getUserInfo () {
      this.$http.get('/proxy/api/users/' + this.user_info.id).then((res) => {
        UserInfo.set(res.data)
      }, (err) => {
        console.log(err)
      })
    }
  },
  computed: {
    user_info () {
      return UserInfo.get()
    },
    site_info () {
      return SiteInfo.get()
    }
  },
  created () {
    this.getUserInfo()
  }
}
</script>
<style lang="sass">
@import './styles/color.sass';
.withdraw-base
  position: absolute
  top: 0
  left: 0
  width: 100%
  min-height: 100%
  background: $gray-bg
  .base-info
    display: flex
    flex-direction: row
    justify-content: space-between
    align-items: center
    padding: 15px
    font-size: .8em
    .balance
      flex: 1 1
      .money
        color: $red
        font-size: 1.5em
    .records
      text-align: right
      color: $gray
      display: flex
      flex-direction: row
      justify-content: flex-end
      align-items: center
      img
        height: 1.3em
  form.withdraw-form
    width: 100%
    display: flex
    flex-direction: column
    justify-content: flex-start
    align-items: stretch
    border-bottom: $gray-bg 1px solid
    .input-group
      background: $white
      display: flex
      flex-direction: row
      justify-content: space-between
      align-items: center
      width: 100%
      padding: 15px
      border-top: $gray-bg 1px solid
      .label
        text-align: right
        font-size: .8em
      input
        flex: 1 1
        border: none
        font-size: 1em
        &::-webkit-input-placeholder
          color: $gray
        &:focus
          box-shadow: none
          outline: none
      .txt
        flex: 1 1
    .error
      padding: 10px 15px 0px 15px
      text-align: center
      color: $red
      font-size: .7em
    .submit-base
      padding: 15px 30px
      button
        width: 100%
        color: $white
        border: none
        background: $light-yellow
        border-radius: 6px
        height: 40px
        font-size: .9em
      button:disabled
        background: $light-gray
  .success-msg
    color: $red
    text-align: center
    font-size: 1em
    line-height: 1.5em
    padding: 15px
  .qrcode
    width: 100%
    text-align: center
    padding: 15px
    img
      width: 150px
      height: 150px
  .tips
    color: $gray
    text-align: center
    font-size: .9em
    line-height: 1.5em
</style>
